/* 主题颜色 */
#app {
	width: 100%;
	height: 100%;
	background-color: var(--app-background);
	transition: 0.2s;
}

/* Light Mode */
#app[color-mode='light'] {
	--nav-group-background:rgb(245, 248, 253);
	--app-background: rgb(245, 245, 245);
	--background: rgb(255, 255, 255);
	--background-nav: #f4f4f4;
	--border-color: rgb(232, 232, 232);
	--color: #2d343c;
	--font-color: #2d343c;
	--font-hover: #409eff;
	--focused-color: #409eff;
	--page-background: #fff;
	--active: rgba(232, 238, 245,0.2);
	--background-hover: #5359fd12;
	--theme-color: #409eff;
	--input-focused: rgb(255, 255, 255);
	--input-border: rgb(50, 153, 255);
	--input-shadow: rgba(34, 162, 237, 0.6);
}

/* Dark Mode */
#app[color-mode='dark'] {
	--nav-group-background:rgb(0, 0, 0);
	--app-background: rgb(0, 0, 0);
	--background: rgb(0, 0, 0);
	--background-nav: #f4f4f4;
	--border-color: rgb(24, 24, 24);
	--color: #747474;
	--font-color: rgb(116, 116, 116);
	--font-hover: #409eff;
	--focused-color: #4b4a4a;
	--page-background: rgb(24, 24, 24);
	--active: rgba(232, 238, 245,0.2);
	--background-hover: rgba(219, 219, 219, 0.2);
	--theme-color: rgb(255, 97, 97);
	--input-focused: rgb(0, 0, 0);
	--input-border: rgb(0, 0, 0);
	--input-shadow: rgba(219, 219, 219, 0.2);
}
